<template>
    <div class="box box11" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <div @click="goToBox9" class="image-1"></div>
        <div class="top">
            <img :src="top" class="top-image" alt="">
        </div>
        <!-- 固定 -->
        <div class="top1">
            <img :src="top" class="top-image" alt="">
        </div>
        <img @click="goToBox12" class="image" :src="bgImg" alt="">
        <div class="to1" @click="go1"></div>
        <div class="to2" @click="go2"></div>
        <div :style="{ zIndex: zIndexValue }" v-show="chulai" class="zhenjian" @click="disblock">
            <img :src="zhenjian" alt="">
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import bgImg from '@/assets/img/12.jpg'
import top from '@/assets/img/12_1.png'
// import zhenjian from '@/assets/img/box11.jpg'
import zhenjian from '@/assets/img/user/weihun.png'

const router = useRouter()
const chulai = ref(false)
const zIndexValue = ref(999)
function goToBox9() {
    console.log('goToBox9 clicked')
    router.push({
        path: '/box9',
        query: {
            name: 'example'
        }
    })
}
function disblock() {
    chulai.value = false
    zIndexValue.value = 999
}
function go1() {
    chulai.value = true
    zIndexValue.value = 1002
    // router.push('/box13')
}
function go2() {
    // router.push('/box13')
    chulai.value = true
    zIndexValue.value = 1002
}

function goToBox12() {
    // console.log('goToBox12 clicked')
    // router.push('/box13')
    // console.log(1111)
}
</script>

<script>
/* global plus */
export default {
    name: 'BoxEleven',
    data() {
        return {
            startX: 0,
            startY: 0
        }
    },
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
        // 设置沉浸式状态栏：深色文字、浅色背景
        this.setStatusBarDark()
        document.addEventListener('plusready', this.handlePlusReady)
    },
    methods: {
        handlePlusReady() {
            this.setStatusBarDark()
        },
        setStatusBarDark() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('dark')
                    plus.navigator.setStatusBarBackground('#ffffff')
                } catch (e) { console.warn('Box11 setStatusBarDark failed', e) }
            }
        },
        restoreStatusBarDefault() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('light')
                    plus.navigator.setStatusBarBackground('#00000000')
                } catch (e) { console.warn('Box11 restoreStatusBarDefault failed', e) }
            }
        },
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box7');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },

        handleTouchStart(e) {
            this.startX = e.touches[0].clientX
            this.startY = e.touches[0].clientY
        },
        handleTouchEnd(e) {
            const endX = e.changedTouches[0].clientX
            const endY = e.changedTouches[0].clientY
            const deltaX = endX - this.startX
            const deltaY = endY - this.startY
            if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
                if (deltaX > 0) {
                    this.goPrev()
                } else {
                    this.goNext()
                }
            }
        },
        goPrev() {
            this.$router.push('/box10')
        },
        goNext() {
            // this.$router.push('/box13')
        },
    },
    beforeUnmount() {
        document.removeEventListener('plusready', this.handleBackButton);
        document.removeEventListener('plusready', this.handlePlusReady);
        this.restoreStatusBarDefault()
    }
}
</script>

<style scoped lang="less">
.top1 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.to1 {
    position: absolute;
    background-color: pink;
    width: 100vw;
    height: 50px;
    top: 629.085px;
    left: 0;
    z-index: 99;
    opacity: 0;
}

.to2 {
    opacity: 0;
    position: absolute;
    background-color: rgb(235, 12, 49);
    width: 100vw;
    height: 50px;
    top: 678.197px;
    left: 0;
    z-index: 99;
}

.top-image {

    width: 100vw;
}

.box {
    width: 375px;
    height: 100vh;
    position: relative;
    overflow: auto;
}

.image {
    width: 375px;
    position: absolute;
    z-index: 1;
    top: 145px;
    left: 0;
    cursor: pointer;
}

.image-1 {
    position: absolute;
    width: 30px;
    height: 30px;
    /* background-color: pink; */
    opacity: 0.1;
    top: 53.7787px;
    left: 15px;
    z-index: 1001;
    cursor: pointer;
}

.top {
    position: relative;
    z-index: 0;
}

.zhenjian {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;

    z-index: 999;

    img {
        width: 100vw;
        height: auto;
    }

}
</style>